<template>
  <q-card>
    <q-card-section>
      <div class="row q-col-gutter-md">
        <div class="col-12">
          <div class="row q-gutter-md">
            <div>队伍配置：</div>
            <div class="text-blue-4"
                 v-for="(team, teamKey) in teamGroup.teams"
                 :key="teamKey">
              {{ team.name || '未命名阵容' }}
            </div>
          </div>
        </div>
        <div class="col-12" v-if="teamGroup.damage[0] === teamGroup.damage[1]">预期标伤：{{ `${teamGroup.damage[0]}w` }}</div>
        <div class="col-12" v-else>预期标伤：{{ `${teamGroup.damage[0]}-${teamGroup.damage[1]}w` }}</div>
      </div>
    </q-card-section>
    <q-card-section>
      <div class="row q-gutter-md items-center">
        <div class="text-h6">详细内容</div>
        <q-space/>
        <q-btn round
               flat
               :icon="expand ? 'keyboard_arrow_up' : 'keyboard_arrow_down'"
               @click="expand = !expand"/>
      </div>
    </q-card-section>
    <q-slide-transition>
      <div v-show="expand">
        <div class="row q-col-gutter-xs">
          <div class="col-12">
            <team v-for="(team, teamKey) in teamGroup.teams"
                  :key="teamKey"
                  :flat="true"
                  :team="team"
                  :full-character-list="fullCharacterList" />
          </div>
        </div>
      </div>
    </q-slide-transition>
  </q-card>
</template>

<script>
import Team from "components/Team";
export default {
  name: "TeamGroup",
  components: {Team},
  props: {
    teamGroup: {
      type: Object,
      required: true
    },
    fullCharacterList: {
      type: Array,
      required: true
    }
  },
  data: () => {
    return {
      expand: false
    };
  }
}
</script>

<style scoped>

</style>
